<script setup>
import { ref } from "vue";

defineProps({
  // msg: String,
});

const count = ref(0);

const list = ref([
  {model:'UNIVERSAL-12',Voltage:'12.8V',Capacity:'120Ah',Cycle:'>3500',Weight:"16.35KG"},
  {model:'UNIVERSAL-24',Voltage:'26.5V',Capacity:'60Ah',Cycle:'>3500',Weight:"16.35KG"},
  {model:'UNIVERSAL-36',Voltage:'38.4V',Capacity:'30Ah',Cycle:'>3500',Weight:"13.85KG"},
  {model:'UNIVERSAL-48',Voltage:'51.2V',Capacity:'30Ah',Cycle:'>3500',Weight:"16.35KG"},
])
</script>

<template>
  <div class="section">
    <!-- banner -->
    <div class="banner">
      <div class="box">
        <div class="left">
          <div class="title">Universal Series</div>
          <div class="des">
            Advanced lithium-ion battery solutions for diverse applications.
            Experience extended lifespan, rapid charging, and smart control
            features that revolutionize energy storage.
          </div>
          <div class="btn">
            <span class="active">Explore Products</span>
            <span class="more">Learn More</span>
          </div>
        </div>
        <div class="right">
          <img
            style="width: 600px; height: 413px"
            src="../assets/images/banner.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- Key Features -->
    <div class="features">
      <div class="list">
        <div class="title">Key Features</div>
        <ul>
          <li>
            <img
              style="width: 48px; height: 48px; margin-bottom: 16px"
              src="../assets/images/Features_icon1.png"
              alt=""
            />
            <div class="info">Eco-Friendly Design</div>
            <div class="text">
              PFAS-free production technology reducing carbon emissions by 40%.
              Fully recyclable components support environmental sustainability.
            </div>
          </li>
          <li>
            <img
              style="width: 48px; height: 48px; margin-bottom: 16px"
              src="../assets/images/Features_icon2.png"
              alt=""
            />
            <div class="info">Scalable Capacity</div>
            <div class="text">
              Expandable up to 24kWh with 15 parallel connections. Perfect for
              both small and large- scale energy storage needs.
            </div>
          </li>
          <li>
            <img
              style="width: 48px; height: 48px; margin-bottom: 16px"
              src="../assets/images/Features_icon3.png"
              alt=""
            />
            <div class="info">Smart Control</div>
            <div class="text">
              Integrated IoT functionality with WiFi and Bluetooth connectivity.
              Monitor and control through our intuitive mobile app.
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- Applications -->
    <div class="Applications">
      <div class="list">
        <div class="title">Applications</div>
        <ul>
          <li>
            <img
              style="width: 100%; height: 192px;"
              src="../assets/images/application1.png"
              alt=""
            />
            <div class="descraption">
              <div class="bt">Golf Carts</div>
              <div class="des">
                Reliable power for electric golf carts with extended range and
                quick charging capabilities.
              </div>
            </div>
          </li>
          <li>
            <img
              style="width: 100%; height: 192px;"
              src="../assets/images/application2.png"
              alt=""
            />
            <div class="descraption">
              <div class="bt">Marine Applications</div>
              <div class="des">
                Powerful and reliable energy storage for boats and marine vessels.
              </div>
            </div>
          </li>
          <li>
            <img
              style="width: 100%; height: 192px;"
              src="../assets/images/application3.png"
              alt=""
            />
            <div class="descraption">
              <div class="bt">Off-Grid Solutions</div>
              <div class="des">
                Perfect for tiny homes and remote locations requiring reliable power storage.
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- Technical Specifications -->
     <div class="Technical">
        <div class="box">
          <div class="title">Technical Specifications</div>
          <div class="desInfo">5-YEAR WARRANTY</div>
          <div class="table">
            <div class="flex header">
              <span>Model</span>
              <span>Voltage</span>
              <span>Capacity</span>
              <span>Cycle Life</span>
              <span>Weight</span>
            </div>
            <div class="flex" v-for="(item,index) in list" :key="index">
              <span>{{ item.model }}</span>
              <span>{{ item.Voltage }}</span>
              <span>{{ item.Capacity }}</span>
              <span>{{ item.Cycle }}</span>
              <span>{{ item.Weight }}</span>
            </div>
          </div>
        </div>
     </div>
  </div>
</template>

<style scoped>
.section {
  width: 100%;
  font-family: Roboto;
}
.banner {
  background: linear-gradient(
    270deg,
    rgba(211, 222, 142, 0.4) -8%,
    #ffffff 55%,
    #ffffff 100%
  );
}
.banner .box {
  width: 82%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 90px 0;
}
.banner .box .left {
  flex: 1;
}
.box .left .title {
  color: #000000;
  margin-bottom: 24px;
  font-size: 48px;
}
.box .left .des {
  color: #4b5563;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 40px;
}
.box .left .btn {
  display: flex;
  align-items: center;
}
.box .left .btn .active {
  background: #52ac73;
  padding: 12px 32px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  margin-right: 16px;
  cursor: pointer;
}
.box .left .btn .more {
  border-radius: 8px;
  border: 2px solid #52ac73;
  padding: 12px 32px;
  font-size: 16px;
  color: #52ac73;
  cursor: pointer;
}
.banner .box .right {
  flex: 1;
  text-align: left;
  padding-left: 50px;
}
/* features */
.features {
  width: 100%;
  padding: 80px 0;
}
.features .list {
  width: 80%;
  margin: 0 auto;
}
.features .list .title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #000000;
  font-size: 30px;
  margin-bottom: 60px;
}
.features .list ul {
  width: 100%;
  display: flex;
  margin: auto;
  align-items: center;
}
.features .list ul li {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)),
    radial-gradient(
      84% 84% at 9% -28%,
      rgba(211, 222, 142, 0.4) 0%,
      rgba(255, 255, 255, 0) 100%
    );
  box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 32px;
  border-radius: 16px;
  width: 600px;
  margin: 10px;
  flex: 1 1 33.33%;
}
.features .list ul li .info {
  color: #000000;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}
.features .list ul li .text {
  color: #4b5563;
  font-size: 16px;
  line-height: 30px;
}

/* Applications */
.Applications {
  width: 100%;
  padding: 80px 0;
  background: #F9FAFB;
}
.Applications .list {
  width: 80%;
  margin: 0 auto;
}
.Applications .list .title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #000000;
  font-size: 30px;
  margin-bottom: 60px;
}
.Applications .list ul {
  width: 100%;
  display: flex;
  margin: auto;
  align-items: center;
}
.Applications .list ul li {
  background: rgba(0, 0, 0, 0);
  border-radius: 16px;
  width: 600px;
  margin: 10px;
  flex: 1 1 33.33%;
}
.Applications .list ul li img{
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.Applications .list ul li .descraption{
  padding:10px 24px 0 24px;
  height:150px;
  background: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.descraption .bt{
  color: #000000;
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: bold;
}
.descraption .des{
  color: #4B5563;
  font-size: 20px;
  line-height: 30px;
}
/* Technical */
.Technical{
  width: 100%;
  padding: 80px 0;
  background: #FFF;
}
.Technical .box{
  width: 80%;
  margin: 0 auto;
}
.Technical .box .title{
  color: #000000;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 8px;
  width:100%;
  text-align: center;
}
.Technical .box .desInfo{
  color: #52AC73;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  width:100%;
  text-align: center;
}
.Technical .box .table{

}
.Technical .box .table .flex{
  display: flex;
  align-items: center;
  
  padding-left: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.Technical .box .table .header{
  font-weight: bold;
  background: #F9FAFB;
}
.Technical .box .table .flex span{
  flex: 1;
  color: #000000;
  font-size: 16px;
  
  display: inline-block;
  height: 56px;
  line-height: 56px;
}
</style>
